<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" media="all"/>
		<script type="text/javascript" src="../layui/layui.all.js"></script>
	</head>
	<body>
		<fieldset class="layui-elem-field layui-field-title">
			<legend>表格数据维护</legend>
			<div class="layui-field-box">
				<div class="layui-form-item">
					<label class="layui-form-label" >姓名</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="name2" placeholder="请输入查询的姓名"/>
					</div>
					<input type="button" value="搜索" id="sel" class="layui-btn" />
					<button class="layui-btn" id="add">添加</button>
				</div>
				<table class="layui-table" style="width: 99%;">
					<thead>
						<tr>
							<th style="width: 5%;">ID</th>
							<th style="width: 25%;">姓名</th>
							<th style="width: 25%;">年龄</th>
							<th style="width: 30%;">生日</th>
							<th style="width: 20%;">操作</th>
						</tr>
					</thead>
					<tbody id="tbody"></tbody>
				</table>
			</div>
		</fieldset>
		
		<script type="text/javascript">
			var $ =layui.jquery;
			var layer = layui.layer;
			var laydate = layui.laydate;
			var laytpl = layui.laytpl;
			var id = 1;
			
			
			// 绑定事件
			$("#add").click(openDialog);
			$("#sel").click(testselect);
			
			function openDialog(){
				layer.open({
					type:1,
					title:"数据维护",
					closeBtn:2,
					area:["500px","460px"],
					shadeClose:true,
					content:$("#aa").html(),
					success:function(){
						dateRender('tTime');
						$("#b1").click(testAdd);
						$("#b2").click(closeLayer);
					}	
				})
			}
			function testAdd(){
				var name=$("#name").val()
				var age=$("#age").val()
				var time=$("#tTime").val()
				
				// 字符串拼接
				// var html=""
				// +"<tr id='tr"+id+"'>"
				// +"<td id='tda"+id+"'>"+id+"</td>"
				// +"<td id='tdb"+id+"'>"+name+"</td>"
				// +"<td id='tdc"+id+"'>"+age+"</td>"
				// +"<td id='tdd"+id+"'>"+time+"</td>"
				// +"<td id='tde"+id+"'><a href='javascript:testdel("+id+");' class ='layui-btn layui-btn-xs'>删除</a><a href='javascript:testupdate("+id+");' class ='layui-btn layui-btn-xs'>修改</a>"
				// +"</tr>"
				
				// 模板引擎
				// {a:b} a 是模板引擎中{{d.a}}，b是要加的值
				var data = {id:id,name:name,age:age,time:time};
				var html = $("#tradd").html();
				html = laytpl(html).render(data);
				
				$("#tbody").append(html);
				closeLayer();
				id++;
			}
			
			function closeLayer(){
				layer.close(layer.index);
			}
			// 渲染事件
			function dateRender(id){
				laydate.render({
					elem:"#"+id,
					type:"date"
				})
			}
			
			function testselect(){
				$("tr").css("background-color","");
				var val = $("#name2").val();
				if(val == '')
					return;
				$("tr").each(function(){
					if($(this).find("td[id^='tdb']").text().indexOf(val)>-1){
						$(this).css("background-color","green");
					}
				})
			}
			
			
			function testdel(id){
				
				layer.confirm("是否删除该行记录？",function(index){
					$("#tr"+id).remove();
					layer.close(index);
				})
			}
			
			// function testupdate(vid){// 回显
			// 	$("#tdb"+vid).html("<input type='text' class='layui-input' id='tName"+vid+"'+ value='"+$("#tdb"+vid).html()+"'/>");
			// 	$("#tdc"+vid).html("<input type='text' class='layui-input' id='tAge"+vid+"' value='"+$("#tdc"+vid).html()+"'/>");
			// 	$("#tdd"+vid).html("<input type='text' class='layui-input' id='tTime"+vid+"' value='"+$("#tdd"+vid).html()+"'/>");
			// 	dateRender('tTime'+vid);
			// 	$("#tde"+vid).html("<a href='javascript:testsave("+vid+");' class ='layui-btn layui-btn-xs'>保存</a>");
			// }
			// function testsave(vid){// 保存
			// 	$("#tdb"+vid).html($("#tName"+vid).val());
			// 	$("#tdc"+vid).html($("#tAge"+vid).val());
			// 	$("#tdd"+vid).html($("#tTime"+vid).val());
			// 	$("#tde"+vid).html("<a href='javascript:testdel("+vid+");'class='layui-btn layui-btn-xs layui-btn-danger'><i class='layui-icon layui-icon-delete'></i></a><a href='javascript:testupdate("+vid+");' class ='layui-btn layui-btn-xs'>修改</a>");
			// }
			
			function testupdate(vid){
				layer.open({
					type:1,
					title:"数据维护",
					closeBtn:2,
					area:["500px","460px"],
					shadeClose:true,
					content:$("#aa").html(),
					success:function(){
						dateRender('tTime');
						$("#b2").click(closeLayer);
						
						var name =$("#tdb"+vid).html();
						var age =$("#tdc"+vid).html();
						var time =$("#tdd"+vid).html();
						
						$("#name").val(name);
						$("#age").val(age);
						$("#tTime").val(time);
						
						$("#b1").click({vid:vid},testsave);
						
					}	
				})
			}
			
			function testsave(event){// 保存
				var vid = event.data.vid;
				$("#tdb"+vid).html($("#name").val());
				$("#tdc"+vid).html($("#age").val());
				$("#tdd"+vid).html($("#tTime").val());
				$("#tde"+vid).html("<a href='javascript:testdel("+vid+");'class='layui-btn layui-btn-xs layui-btn-danger'><i class='layui-icon layui-icon-delete'></i></a><a href='javascript:testupdate("+vid+");' class ='layui-btn layui-btn-xs'>修改</a>");
				closeLayer();
			}
			
			
			
		</script>
		<!-- 模板 -->
		<script type="text/html" id="aa">
			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-inline">
					<input type="text" id="name" class="layui-input" placeholder="输入姓名" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">年龄</label>
				<div class="layui-input-inline">
					<input type="text" id="age" class="layui-input" placeholder="输入年龄" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label" >生日</label>
				<div class="layui-input-inline">
					<input type="text" id="tTime" class="layui-input" placeholder="输入生日" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label" ></label>
				<div class="layui-input-inline">
					<input type="button" id="b1" value="确定" class="layui-btn" />
					<input type="button" id="b2" value="取消" class="layui-btn" />
				</div>
			</div>
		</script>
		<!-- 模板引擎 -->
		<script type="text/text" id='tradd'>
			<tr id='tr{{ d.id }}'> 
				<td id='tda{{ d.id }}'>{{ d.id }}</td>
				<td id='tdb{{ d.id }}'>{{ d.name }}</td>
				<td id='tdc{{ d.id }}'>{{ d.age }}</td>
				<td id='tdd{{ d.id }}'>{{ d.time }}</td>
				<td id='tde{{ d.id }}'>
					<a href="javascript:testdel({{ d.id }})" 
						class="layui-btn layui-btn-xs layui-btn-danger">
						<i class="layui-icon layui-icon-delete"></i>
					</a>
					<a href="javascript:testupdate({{ d.id }})"
						class="layui-btn layui-btn-xs">
						修改
					</a>
				</td>
			</tr>
		</script>
			<!-- spring boot -- thymleaf网页模板
			freemarket网页模板 -->
	</body>
</html>
